<template>
    <div class="add-card">
        <v-navbar></v-navbar>
        <div class="add-wrapper">
            <div class="info">
                <icon-title :iconClass="userIcon" :text="userInfo"></icon-title>
                <div class="info-item">
                    <div class="wrapper">
                        <span class="text">姓名</span>
                        <input type="text" maxlength="32" class="inp" :disabled="isBe" v-model="userName" placeholder="请输入您的真实姓名">
                    </div>
                </div>
                <div class="info-item">
                    <div class="wrapper border-none">
                        <span class="text">身份证号</span>
                        <input type="text" maxlength="18" class="inp" :disabled="isBe" v-model="userID" placeholder="请输入您的身份证号">
                    </div>
                </div>
                <icon-title :iconClass="cardIcon" :text="cardInfo"></icon-title>
                <div class="info-item">
                    <div class="wrapper">
                        <span class="text">银行卡号</span>
                        <input type="text" maxlength="19" class="inp" v-model="cardName" placeholder="请输入您的银行卡号">
                    </div>
                </div>
                <div class="info-item">
                    <div class="wrapper">
                        <span class="text">开户行</span>
                        <input type="text" maxlength="50" class="inp" v-model="cardBank" placeholder="请输入开户行">
                    </div>
                </div>
                <div class="info-item">
                    <div class="wrapper border-none">
                        <span class="text">开户行地址</span>
                        <input type="text" maxlength="255" class="inp" v-model="cardAddress" placeholder="请输入开户行地址">
                    </div>
                </div>
            </div>
            <div class="keep" @click="k_submit">
                <v-button :text="buttonText"></v-button>
            </div>
        </div>
    </div>
</template>

<script>
import navbar from '@c/navbar/navbar'
import iconTitle from '@c/iconTitle/iconTitle'
import Button from '@c/button/button'
import {mapState, mapMutations} from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

export default {
    name: 'AddCard',
    data() {
        return {
            userIcon: 'user', //小标题类名
            userInfo: '请输入您的身份信息', //小标题名
            cardIcon: 'card-icon',//小标题类名
            cardInfo: '请输入您的银行卡信息',//小标题名
            buttonText: '保存',  //按钮名称
            userName: '',//姓名
            userID: '',//身份证号
            cardName: '',//银行卡号
            cardBank: '',//开户行
            cardAddress: '',//开户行地址
            isBe: false,//是否存信息
        }
    },
    components: {
        'v-navbar': navbar,
        'icon-title': iconTitle,
        'v-button': Button
    },
    computed: {
        ...mapState(['wtitle', 'rback'])
    },
    methods: {
        ...mapMutations(['WTITLE', 'RBACK']),
        // 提交
        k_submit() {
            this.submitKeep()
        },
        // 提交验证
        submitKeep() {
            let keepData = {
                userId: window.localStorage.userId,
                realName: this.userName,
                identityId: this.userID,
                bankNum: this.cardName,
                bankName: this.cardBank,
                bankZH: this.cardAddress
            }
            if (keepData.realName === '') {
                this.$Message.warning('请输入姓名')
                return
            }
            if (keepData.identityId === '') {
                this.$Message.warning('请输入身份证号')
                return
            }
            if (keepData.bankNum === '') {
                this.$Message.warning('请输入银行卡号')
                return
            }
            if (keepData.bankName === '') {
                this.$Message.warning('请输入开户行')
                return
            }
            if (keepData.bankZH === '') {
                this.$Message.warning('请输入开户行地址')
                return
            }
            this.doKeep(keepData)
        },
        // 执行提交
        doKeep(keepData) {
            this.$store.state.loadding = true
            tokenPost(tokenLink.card.keep, keepData).then(re => {
                this.$store.state.loadding = false
                if (re.status == 0) {
					this.$Message.success('保存成功')
					this.$router.push('/card')
				} else {
					this.$Message.warning(re.msg)
				}
            })
        },
        _getInfo() {
            let userInfo = {
                userId: window.localStorage.userId
            }
            this.$store.state.loadding = true
            tokenPost(tokenLink.user.identity, userInfo).then(re => {
                this.$store.state.loadding = false
                if(re.status === 0) {
                    if(re.data.identityId !== '' && re.data.realName !== '') {
                        this.userName = re.data.realName
                        this.userID = re.data.identityId
                        this.isBe = true
                    }
                } else {
                    this.$Message.warning(re.msg)
                }
            })
        }
    },
    created() {
        this.WTITLE('添加银行卡')
        this.RBACK(true)
        this._getInfo()
    }
}
</script>